<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
	<title>项目费用计算</title>
	<!-- <link rel="shortcut icon" href="./static/image/favicon.ico"> -->
	<link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./static/css/public.css">
	<link rel="stylesheet" type="text/css" href="./static/css/m_tailwind.css">
	<link rel="stylesheet" type="text/css" href="./static/css/index.css">
</head>
<body>

	<div id="app" v-cloak>
		<div v-if="isWeixin" class="weixin-page">
			<img src="./static/image/01.jpeg"/>
		</div>
		<div v-else class="t-page">
			<div class="t-form">
				<el-input class="project-title" v-model="form.title" placeholder="请输入项目名称" clearable @blur="watchCostChange"></el-input>
	
				<el-collapse class="type-list" v-model="activeNames">
				  <el-collapse-item v-for="(aItem, aIndex) in form.typeList" :key="aIndex" :name="aIndex">
						<template #title>
							<div class="coll-title">
								<div>{{aIndex+1}}.</div>
								<div @click.stop @keyup.stop>
									<el-input v-model="aItem.name" placeholder="请输入计费类目" clearable @blur="watchCostChange"></el-input>
								</div>
								<div class="total">类目合计：<br/>{{aItem.total || '-'}} 元</div>
							</div>
						</template>
					<div class="content-box">
						<div class="calc-lsit">
								<template v-for="(bItem, bIndex) in aItem.children" :key="bIndex">
									<div v-if="!bItem.edit" class="show-item">
										<div class="title">
											<div class="no">{{bIndex+1}}</div>
											<span>{{bItem.name}}</span>
										</div>
										<div class="row">
											<div class="label">公式：</div>
											<div class="value">
												{{bItem.formulaText}} = {{bItem.result}}
											</div>
										</div>
										<div v-if="bItem.deduct.length" class="deduct-box">
											<div class="name">扣减项</div>
											<div class="list">
												<div v-for="(cItem, cIndex) in bItem.deduct" :key="cIndex" class="row">
													<div class="label">{{cItem.name}}：</div>
													<div class="value">
														<template v-if="cItem.formula != 99">{{cItem.formulaText}} = {{cItem.result}}</template>
														<template v-else>{{cItem.result}}</template>
													</div>
												</div>
											</div>
										</div>
										<div class="text-right">
											<el-link class="ml-15" type="warning" icon="el-icon-edit-outline" :underline="false" @click="editCostItem(aItem, bItem)">修改</el-link>
											<el-link class="ml-15" type="danger" icon="el-icon-delete" :underline="false" @click="deleteCostItem(aItem, bIndex)">删除</el-link>
										</div>
									</div>
									<div v-else class="edit-item">
										<div class="no mb-10">{{bIndex+1}}</div>
										<div class="input-box">
											<div class="label">计费名称</div>
											<div class="value">
												<el-input v-model="bItem.name" size="small" placeholder="例如：地砖" clearable @blur="watchCostChange"></el-input>
											</div>
										</div>
										<div class="formula-list">
											<div v-for="(item, index) in formula" :key="index" 
												class="item" 
												:class="{active: bItem.formula == item.code}"
												@click="changeFormula(bItem, item.code)">{{item.name}}</div>
										</div>
										<div v-if="[1,2].includes(bItem.formula)" class="input-box">
											<div class="label">长(米)</div>
											<div class="value">
												<el-input-number class="w-full" size="small" v-model="bItem.long" :min="0" placeholder="例如：30" :controls="false" @blur="watchCostChange"></el-input-number>
											</div>
										</div>
										<div v-if="[1,2].includes(bItem.formula)" class="input-box">
											<div class="label">宽(米)</div>
											<div class="value">
												<el-input-number class="w-full" size="small" v-model="bItem.width" :min="0" placeholder="例如：30" :controls="false" @blur="watchCostChange"></el-input-number>
											</div>
										</div>
										<div v-if="[2].includes(bItem.formula)" class="input-box">
											<div class="label">高(米)</div>
											<div class="value">
												<el-input-number class="w-full" size="small" v-model="bItem.height" :min="0" placeholder="例如：30" :controls="false" @blur="watchCostChange"></el-input-number>
											</div>
										</div>
										<div v-if="[1,2].includes(bItem.formula)" class="input-box">
											<div class="label">单价(元)</div>
											<div class="value">
												<el-input-number class="w-full" size="small" v-model="bItem.price" :min="0" placeholder="例如：30" :controls="false" @blur="watchCostChange"></el-input-number>
											</div>
										</div>
										<template v-if="[99].includes(bItem.formula)">
											<el-input class="mb-10" size="small" :id="`key_${aIndex}_${bIndex}`" v-model="bItem.formulaText"placeholder="例如：(30+10)×20-1×1×20" 
											clearable
											@blur="watchCostChange">
												<template slot="prepend">
													<div>计费公式</div>
												</template>
											</el-input>
											<div class="keyboard-box">
												<div v-for="(item, index) in keyboard" :key="index" class="item" @click="changeKeyboard(bItem, item, `key_${aIndex}_${bIndex}`)">{{item}}</div>
											</div>
										</template>
										<div v-if="[1,2].includes(bItem.formula)" class="deduct-box">
											<div class="btn-box">
												<div class="item" v-for="(item, index) in formula" :key="index" @click="addDeduct(bItem, item.code)">扣减项{{item.name}}</div>
											</div>
											<div v-if="bItem.deduct.length" class="list">
												<div v-for="(cItem, cIndex) in bItem.deduct" :key="cIndex" class="item">
													<div class="sort">
														<span>{{cIndex+1}}</span>
													</div>
													<div class="content">
														<div class="input-box">
															<div class="label">名称</div>
															<div class="value">
																<el-input class="w-full" size="small" v-model="cItem.name" placeholder="例如：右下角不用铺砖" @blur="watchCostChange"></el-input>
															</div>
														</div>
														<div v-if="[1,2].includes(cItem.formula)" class="input-box">
															<div class="label">长(米)</div>
															<div class="value">
																<el-input-number class="w-full" size="small" v-model="cItem.long" :min="0" :controls="false" @blur="watchCostChange"></el-input-number>
															</div>
														</div>
														<div v-if="[1,2].includes(cItem.formula)" class="input-box">
															<div class="label">宽(米)</div>
															<div class="value">
																<el-input-number class="w-full" size="small" v-model="cItem.width" :min="0" :controls="false" @blur="watchCostChange"></el-input-number>
															</div>
														</div>
														<div v-if="[2].includes(cItem.formula)" class="input-box">
															<div class="label">高(米)</div>
															<div class="value">
																<el-input-number class="w-full" size="small" v-model="cItem.height" :min="0" :controls="false" @blur="watchCostChange"></el-input-number>
															</div>
														</div>
														<div v-if="[99].includes(cItem.formula)" class="input-box">
															<div class="label">费用(元)</div>
															<div class="value">
																<el-input-number class="w-full" size="small" v-model="cItem.formulaText" :min="0" :controls="false" @blur="watchCostChange"></el-input-number>
															</div>
														</div>
													</div>
													<div class="handle">
														<i class="el-icon-delete-solid" @click="deleteDeduct(bItem, cIndex)"></i>
													</div>
												</div>
											</div>
										</div>
										<div class="flex justify-between items-center">
											<div class="result">结果：{{bItem.result || '-'}} 元</div>
											<div class="text-right">
												<el-link class="ml-15" type="primary" icon="el-icon-circle-check" :underline="false" @click="saveCostItem(aIndex, bItem)">确定</el-link>
												<el-link class="ml-15" type="danger" icon="el-icon-delete" :underline="false" @click="deleteCostItem(aItem, bIndex)">删除</el-link>
											</div>
										</div>
									</div>
								</template>
						</div>
							<div class="text-center pt-20">
								<el-link class="mr-15" icon="el-icon-delete" :underline="false" @click="deleteTypeItem(aItem)">删除本类目</el-link>
								<el-link icon="el-icon-circle-plus-outline" :underline="false" @click="addCostItem(aItem)">添加计费名</el-link>
							</div>
					</div>
				  </el-collapse-item>
				</el-collapse>
				<div class="project-total">项目合计：{{form.total || '-'}} 元</div>
			</div>
			<div class="page-handle">
				<el-button class="btn" type="primary" @click="addTypeItem()">添加计费类目</el-button>
				<el-button class="btn" type="primary" @click="saveToImage()">保存为图片</el-button>
				<el-button class="btn" type="primary" @click="clearProject()">清空本项目</el-button>
				<!-- <el-button class="btn" type="primary" @click="saveToList()">保存到列表</el-button> -->
			</div>
		</div>

		


		<div v-if="dialog.v1" class="t-dialog" :class="{show: dialog.v2}">
			<div class="t-content">
				<div class="title">提示</div>
				<div class="message">{{dialog.message}}</div>
				<div class="handle">
					<div class="btn cancel" @click="dialogClose()">取消</div>
					<div class="btn ok" @click="dialogConfirm()">确认</div>
				</div>
			</div>
		</div>



		<div class="save-image-box">
			<div class="image-wrapper" ref="imageWrapper">
				<div class="form">
					<div class="title">{{form.title}}</div>
					<div v-for="(aItem, aIndex) in form.typeList" :key="aIndex" class="type">
						<div class="title">{{aIndex+1}}.{{aItem.name}}<div class="type-total">合计：{{aItem.total}} 元</div></div>
						<div class="cost">
							<div v-for="(bItem, bIndex) in aItem.children" :key="bIndex" class="cost-item">
								<div class="text">{{bIndex+1}}.{{bItem.name}}：{{bItem.formulaText}} = {{bItem.result}} 元</div>
								<div v-if="bItem.deduct.length" class="deduct-box">
									<div class="name">扣减项</div>
									<div class="list">
										<div v-for="(cItem, cIndex) in bItem.deduct" :key="cIndex" class="row">
											{{cItem.name}}：{{cItem.formulaText}} = {{cItem.result}}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="project-total">
						<div class="num">项目合计：<span>{{form.total}}</span> 元</div>
						<div class="time">{{currentTime}}</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<script src="./static/libs/vue2.6.8/vue.min.js"></script>
	<script src="./static/libs/element-ui/index.js"></script>
	<script src="./static/libs/html2canvas.js"></script>
	<script src="./static/js/Tools.js"></script>
	<script src="./static/js/index.js"></script>
</body>
</html>